<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view style="border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);padding: 20rpx 0;margin-top: 100rpx;">
			  <input :value="cardNo" @input="priceInput" label="礼品卡卡号" placeholder="请输入礼品卡卡号"/>
			</view>
			<view class="gopay" @tap="goPayBtn">充值</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import MD5 from '../../graceUI/jsTools/md5.js'
export default {
	data() {
		return {
			cardNo:"",
		};
	},
	onLoad() {
		
	},
	methods: {
		priceInput(e){
			this.cardNo = e.target.value
		},
		goPayBtn() {
		  if(!this.cardNo) {
		    Toast("请输入充值卡卡号")
		    return
		  }
			this.gRequest.get('/recharges/giftcardCheck', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id,
				cardcode: MD5.md5(this.cardNo+'gift!card#2005')
			}, res => {
				if (res.status == 1) {
					uni.showToast({
						title:"充值成功",
						icon:"none"
					})
				  uni.navigateBack({})
				} else {
					uni.showToast({
						title:"礼物卡卡号不正确，请重新输入",
						icon:"none"
					})
				}
			});
		},
	},
	components: {
		gracePage
	}
};
</script>
<style>
page {
	background: #f9f9f9;
}
</style>
<style lang="scss">
  .my_money_recharge {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 4vw;
    flex-wrap: wrap;
    padding: 0 3vw;
  }

  .my_money_recharge_item {
    width: 30vw;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #333333;
    border: 1px solid #CCCCCC;
    border-radius: 2vw;
    margin-bottom: 3vw;
  }
  .my_money_recharge_item>span:nth-child(1) {
    font-size: 5vw;
    font-weight: 600;
  }

  .my_money_recharge_item>span:nth-child(2) {
    font-size: 3.2vw;
  }
  .my_money_recharge_item_select {
    border: 1px solid #EB5D4B;
  }
  .gopay {
    width: 80vw;
    height: 12vw;
    text-align: center;
    line-height: 12vw;
    background-color: #EB5D4B;
    border-radius: 2vw;
    color: #FFFFFF;
    margin-top: 4vw;
    margin: 10vw auto 0;
  }
</style>
